<template>
  <div>
    <div class="swipe-box">
      <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :width="300">
        <van-swipe-item>
          <img
            class="swipe-img"
            src="//gw.alicdn.com/imgextra/i2/71/O1CN01NLwMA61COYkQ91CVw_!!71-0-luban.jpg_790x10000Q75.jpg_.webp"
            alt
          />
        </van-swipe-item>

        <van-swipe-item>
          <img
            class="swipe-img"
            src="//gw.alicdn.com/imgextra/i3/108/O1CN01OpHLt41CfVP0v6Han_!!108-0-luban.jpg_790x10000Q75.jpg_.webp"
            alt
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            class="swipe-img"
            src="//gw.alicdn.com/tfs/TB19qAwj5DsXe8jSZR0XXXK6FXa-1125-352.jpg_790x10000Q75.jpg_.webp"
            alt
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            class="swipe-img"
            src="//gw.alicdn.com/imgextra/i1/130/O1CN012fkLvl1Cpa7FD8jTV_!!130-0-luban.jpg_790x10000Q75.jpg_.webp"
            alt
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="list in this.imgLists" :key="list.id">
        <van-image :src="list.src" />
        <p>{{list.text}}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
      imgLists: [
        {
          id: "001",
          src:
            "http://gw.alicdn.com/tfs/TB1Nq50tqL7gK0jSZFBXXXZZpXa-210-171.png_110x10000.jpg_.webp",
          text: "机票",
        },
        {
          id: "002",
          src:
            "http://gw.alicdn.com/tfs/TB1n256tAL0gK0jSZFxXXXWHVXa-210-171.png_110x10000.jpg_.webp",
          text: "酒店",
        },
        {
          id: "003",
          src:
            "http://gw.alicdn.com/tfs/TB1_Ie3tEz1gK0jSZLeXXb9kVXa-210-171.png_110x10000.jpg_.webp",
          text: "火车票",
        },
        {
          id: "004",
          src:
            "http://gw.alicdn.com/tfs/TB1v9m8tAT2gK0jSZFkXXcIQFXa-210-171.png_110x10000.jpg_.webp",
          text: "汽车票",
        },
        {
          id: "005",
          src:
            " http://gw.alicdn.com/tfs/TB1OIC3tvb2gK0jSZK9XXaEgFXa-210-171.png_110x10000.jpg_.webp",
          text: "门票",
        },
      ],
    };
  },
};
</script>
<style scope>
.swipe-box {
  width: 100%;
  height: 150px;
  background: url("//gw.alicdn.com/tfs/TB1ZPa0EzTpK1RjSZKPXXa3UpXa-750-420.png_790x10000.jpg_.webp");
}
.my-swipe {
  margin: 10px 37.5px;
  border-radius: 7px;
}
.swipe-img {
  width: 100%;
}
</style>